ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು: ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಯ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆ

ಇಂದಿನ ವೇಗದ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಕೇವಲ ಐಷಾರಾಮಿಯಲ್ಲ; ಅದು ಒಂದು ಅವಶ್ಯಕತೆ. ನಿಧಾನವಾದ ಅಥವಾ ಪ್ರತಿಕ್ರಿಯಿಸದ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರ ನಿರಾಶೆಗೆ, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳಿಗೆ, ಮತ್ತು ಮಾರಾಟ, ಜಾಹೀರಾತು ಆದಾಯ, ಅಥವಾ ಬಳಕೆದಾರರ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯಂತಹ ವ್ಯವಹಾರದ ಗುರಿಗಳ ಮೇಲೆ ನೇರ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ವರ್ಷಗಳಿಂದ, ಡೆವಲಪರ್‌ಗಳು ಒಂದು ನಿರ್ದಿಷ್ಟ ಸಮಯದಲ್ಲಿ, ಸಾಮಾನ್ಯವಾಗಿ ಪುಟದ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುವ ಸಾಧನಗಳನ್ನು ಅವಲಂಬಿಸಿದ್ದಾರೆ. ಇದು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, ಈ ವಿಧಾನವು ಕಥೆಯ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತದೆ: ಬಳಕೆದಾರರು ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವಾಗ ಅವರ ಸಂಪೂರ್ಣ ಅನುಭವ. ಇಲ್ಲಿಯೇ ರನ್‌ಟೈಮ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಬರುತ್ತದೆ, ಮತ್ತು ಅದರ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಸಾಧನವೆಂದರೆ ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಆಗಿದೆ.

ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳು ಸಾಮಾನ್ಯವಾಗಿ performance.getEntries() ನಂತಹ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾಕ್ಕಾಗಿ ಪೋಲಿಂಗ್ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಇದು ಅಸಮರ್ಥವಾಗಿರಬಹುದು, ಪೋಲ್‌ಗಳ ನಡುವೆ ಸಂಭವಿಸುವ ನಿರ್ಣಾಯಕ ಘಟನೆಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವ ಸಾಧ್ಯತೆಯಿದೆ, ಮತ್ತು ಅದು ಅಳೆಯಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆಯನ್ನೇ ಹೆಚ್ಚಿಸಬಹುದು. ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆಗಳು ಸಂಭವಿಸಿದಂತೆ ಅವುಗಳಿಗೆ ಚಂದಾದಾರರಾಗಲು ಅಸಿಂಕ್ರೋನಸ್, ಕಡಿಮೆ-ಹೊರೆಯ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಈ ಅತ್ಯಗತ್ಯ API ಯ ಆಳವಾದ ನೋಟಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ, ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು, ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು, ಮತ್ತು ಅಂತಿಮವಾಗಿ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೇಗವಾದ, ಹೆಚ್ಚು ಆನಂದದಾಯಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅದರ ಶಕ್ತಿಯನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬೇಕೆಂದು ತೋರಿಸುತ್ತದೆ.

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಎಂದರೇನು?

ಅದರ ಮೂಲದಲ್ಲಿ, ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಎನ್ನುವುದು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳು ಎಂದು ಕರೆಯಲ್ಪಡುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾಪನ ಘಟನೆಗಳನ್ನು ಗಮನಿಸಲು ಮತ್ತು ಸಂಗ್ರಹಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವ ಇಂಟರ್ಫೇಸ್ ಆಗಿದೆ. ಬ್ರೌಸರ್‌ನೊಳಗಿನ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಸಂಬಂಧಿಸಿದ ಚಟುವಟಿಕೆಗಳಿಗೆ ಇದು ಒಂದು ಮೀಸಲಾದ ಲಿಸನರ್ (ಕೇಳುಗ) ಎಂದು ಯೋಚಿಸಿ. ನೀವು ಬ್ರೌಸರನ್ನು ಸಕ್ರಿಯವಾಗಿ, "ಏನಾದರೂ ಆಗಿದೆಯೇ?" ಎಂದು ಕೇಳುವ ಬದಲು, ಬ್ರೌಸರ್ ತಾನಾಗಿಯೇ, "ಹೊಸ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆ ಈಗಷ್ಟೇ ಸಂಭವಿಸಿದೆ! ಇಲ್ಲಿ ವಿವರಗಳಿವೆ" ಎಂದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ.

ಇದನ್ನು ಅಬ್ಸರ್ವರ್ ಮಾದರಿಯ ಮೂಲಕ ಸಾಧಿಸಲಾಗುತ್ತದೆ. ನೀವು ಒಂದು ಅಬ್ಸರ್ವರ್ ಇನ್‌ಸ್ಟೆನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ, ಅದಕ್ಕೆ ಯಾವ ರೀತಿಯ ಕಾರ್ಯಕ್ಷಮತೆ ಘಟನೆಗಳಲ್ಲಿ ಆಸಕ್ತಿ ಇದೆ ಎಂದು ಹೇಳುತ್ತೀರಿ (ಉದಾಹರಣೆಗೆ, ದೊಡ್ಡ ಪೇಂಟ್‌ಗಳು, ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗಳು, ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು), ಮತ್ತು ಒಂದು ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತೀರಿ. ಬ್ರೌಸರ್‌ನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪ್ರಕಾರದ ಹೊಸ ಘಟನೆ ರೆಕಾರ್ಡ್ ಆದಾಗಲೆಲ್ಲಾ, ನಿಮ್ಮ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಹೊಸ ಎಂಟ್ರಿಗಳ ಪಟ್ಟಿಯೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ಈ ಅಸಿಂಕ್ರೋನಸ್, ಪುಶ್-ಆಧಾರಿತ ಮಾದರಿಯು performance.getEntries() ಅನ್ನು ಪದೇ ಪದೇ ಕರೆಯುವ ಹಳೆಯ ಪುಲ್-ಆಧಾರಿತ ಮಾದರಿಗಿಂತ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿದೆ.

ಹಳೆಯ ವಿಧಾನ vs. ಹೊಸ ವಿಧಾನ

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್‌ನ ನಾವೀನ್ಯತೆಯನ್ನು ಶ್ಲಾಘಿಸಲು, ಎರಡು ವಿಧಾನಗಳನ್ನು ಹೋಲಿಸಿ ನೋಡೋಣ:

• ಹಳೆಯ ವಿಧಾನ (ಪೋಲಿಂಗ್): ನಿಮ್ಮ ಮೆಟ್ರಿಕ್ ರೆಕಾರ್ಡ್ ಆಗಿದೆಯೇ ಎಂದು ನೋಡಲು ನೀವು setTimeout ಅಥವಾ requestAnimationFrame ಬಳಸಿ ನಿಯತಕಾಲಿಕವಾಗಿ performance.getEntriesByName('my-metric') ಅನ್ನು ಕಾಲ್ ಮಾಡಬಹುದು. ಇದು ಸಮಸ್ಯಾತ್ಮಕವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ತಡವಾಗಿ ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಈವೆಂಟ್ ಅನ್ನು ಕಳೆದುಕೊಳ್ಳಬಹುದು, ಅಥವಾ ಆಗಾಗ್ಗೆ ಪರಿಶೀಲಿಸಿ CPU ಸೈಕಲ್‌ಗಳನ್ನು ವ್ಯರ್ಥ ಮಾಡಬಹುದು. ನೀವು ನಿಯಮಿತವಾಗಿ ಎಂಟ್ರಿಗಳನ್ನು ಕ್ಲಿಯರ್ ಮಾಡದಿದ್ದರೆ ಬ್ರೌಸರ್‌ನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಬಫರ್ ಅನ್ನು ತುಂಬುವ ಅಪಾಯವೂ ಇದೆ.
• ಹೊಸ ವಿಧಾನ (ಅಬ್ಸರ್ವಿಂಗ್): ನೀವು ಒಮ್ಮೆ PerformanceObserver ಅನ್ನು ಸೆಟಪ್ ಮಾಡುತ್ತೀರಿ. ಇದು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸದ್ದಿಲ್ಲದೆ ಕುಳಿತು, ಕನಿಷ್ಠ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಪುಟ ಲೋಡ್ ಆದ ಒಂದು ಮಿಲಿಸೆಕೆಂಡ್ ನಂತರ ಅಥವಾ ಬಳಕೆದಾರರ ಸೆಷನ್‌ನ ಹತ್ತು ನಿಮಿಷಗಳ ನಂತರ ಸಂಬಂಧಿತ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ರೆಕಾರ್ಡ್ ಆದ ತಕ್ಷಣ, ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ತಕ್ಷಣವೇ ಸೂಚನೆ ನೀಡಲಾಗುತ್ತದೆ. ಇದು ನೀವು ಎಂದಿಗೂ ಈವೆಂಟ್ ಅನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ನಿಮ್ಮ ಮಾನಿಟರಿಂಗ್ ಕೋಡ್ ಸಾಧ್ಯವಾದಷ್ಟು ಸಮರ್ಥವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ನೀವು ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಕೆಲಸದ ಹರಿವಿನಲ್ಲಿ ಸಂಯೋಜಿಸುವುದರಿಂದ ಜಾಗತಿಕ ಮಟ್ಟವನ್ನು ತಲುಪಲು ಗುರಿ ಹೊಂದಿರುವ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ನಿರ್ಣಾಯಕವಾದ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ.

• ಅಡಚಣೆಯಿಲ್ಲದ ಮಾನಿಟರಿಂಗ್: ಅಬ್ಸರ್ವರ್‌ನ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಐಡಲ್ (idle) ಅವಧಿಗಳಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರಿಂಗ್ ಕೋಡ್ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಅಡ್ಡಿಪಡಿಸುವುದಿಲ್ಲ ಅಥವಾ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಹಗುರವಾಗಿರುವಂತೆ ಮತ್ತು ನಗಣ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೆಜ್ಜೆಗುರುತನ್ನು ಹೊಂದುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.
• ಸಮಗ್ರ ರನ್‌ಟೈಮ್ ಡೇಟಾ: ವೆಬ್ ಡೈನಾಮಿಕ್ ಆಗಿದೆ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಕೇವಲ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವುದಿಲ್ಲ. ಬಳಕೆದಾರರು ಸಂಕೀರ್ಣವಾದ ಅನಿಮೇಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಸ್ಕ್ರೋಲ್ ಮಾಡುವ ಮೂಲಕ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡಬಹುದು, ಅಥವಾ ಆರಂಭಿಕ ಪುಟ ನೆಲೆಗೊಂಡ ನಂತರ ಭಾರೀ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು. ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಈ ರನ್‌ಟೈಮ್ ಘಟನೆಗಳನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತದೆ, ನಿಮಗೆ ಸಂಪೂರ್ಣ ಬಳಕೆದಾರರ ಸೆಷನ್‌ನ ಪೂರ್ಣ ಚಿತ್ರವನ್ನು ನೀಡುತ್ತದೆ.
• ಭವಿಷ್ಯ-ನಿರೋಧಕ ಮತ್ತು ಪ್ರಮಾಣೀಕೃತ: ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು W3C ಶಿಫಾರಸು ಮಾಡಿದ ಮಾನದಂಡವಾಗಿದೆ. ಹೊಸ ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಟ್ರಿಕ್‌ಗಳು ಮತ್ತು API ಗಳನ್ನು ಇದರೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಇದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಸುಸ್ಥಿರ ಮತ್ತು ಮುಂದಾಲೋಚನೆಯ ಆಯ್ಕೆಯಾಗಿದೆ.
• ರಿಯಲ್ ಯೂಸರ್ ಮಾನಿಟರಿಂಗ್ (RUM) ನ ಅಡಿಪಾಯ: ವಿವಿಧ ದೇಶಗಳು, ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ನಿಮ್ಮ ಸೈಟ್ ಬಳಕೆದಾರರಿಗೆ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಜವಾಗಿಯೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನಿಮಗೆ ನೈಜ ಸೆಷನ್‌ಗಳಿಂದ ಡೇಟಾ ಬೇಕು. ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಒಂದು ದೃಢವಾದ RUM ಪರಿಹಾರವನ್ನು ನಿರ್ಮಿಸಲು ಸೂಕ್ತವಾದ ಸಾಧನವಾಗಿದೆ, ಇದು ನಿಮಗೆ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ಅವುಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸುವಿಕೆ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಅನಾಲಿಟಿಕ್ಸ್ ಸೇವೆಗೆ ಕಳುಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ: ಪೋಲಿಂಗ್‌ನೊಂದಿಗೆ, ನೀವು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ರೆಕಾರ್ಡ್ ಆಗುವ ಮೊದಲು ಅದನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸಬಹುದು. ಅಬ್ಸರ್ವರ್ ಮಾದರಿಯು ಈ ರೇಸ್ ಕಂಡೀಷನ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿವಾರಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಎಂಟ್ರಿ ಲಭ್ಯವಾದ ನಂತರವೇ ನಿಮ್ಮ ಕೋಡ್ ಚಲಿಸುತ್ತದೆ.

ಪ್ರಾರಂಭಿಸುವುದು: ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್‌ನ ಮೂಲಭೂತ ಅಂಶಗಳು

API ಅನ್ನು ಬಳಸುವುದು ಸರಳವಾಗಿದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯು ಮೂರು ಮುಖ್ಯ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿದೆ: ಅಬ್ಸರ್ವರ್ ಅನ್ನು ರಚಿಸುವುದು, ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು, ಮತ್ತು ಅಬ್ಸರ್ವರ್‌ಗೆ ಏನನ್ನು ಗಮನಿಸಬೇಕೆಂದು ಹೇಳುವುದು.

1. ಕಾಲ್‌ಬ್ಯಾಕ್‌ನೊಂದಿಗೆ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ರಚಿಸುವುದು

ಮೊದಲಿಗೆ, ನೀವು PerformanceObserver ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಂಷಿಯೇಟ್ ಮಾಡುತ್ತೀರಿ, ಅದಕ್ಕೆ ಒಂದು ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಪಾಸ್ ಮಾಡುತ್ತೀರಿ. ಹೊಸ ಎಂಟ್ರಿಗಳನ್ನು ಪತ್ತೆ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Entry Type:', entry.entryType); console.log('Entry Name:', entry.name); console.log('Start Time:', entry.startTime); console.log('Duration:', entry.duration); } });

ಕಾಲ್‌ಬ್ಯಾಕ್ ಒಂದು PerformanceObserverEntryList ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಪಡೆಯುತ್ತದೆ. ಹೊಸದಾಗಿ ಗಮನಿಸಿದ ಎಲ್ಲಾ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿಗಳ ಒಂದು ಅರೇಯನ್ನು ಪಡೆಯಲು ನೀವು ಈ ಪಟ್ಟಿಯಲ್ಲಿ getEntries() ಮೆಥಡ್ ಅನ್ನು ಕಾಲ್ ಮಾಡಬಹುದು.

2. ನಿರ್ದಿಷ್ಟ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಗಮನಿಸುವುದು

ನೀವು ಏನನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬೇಕೆಂದು ಹೇಳುವವರೆಗೂ ಅಬ್ಸರ್ವರ್ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಇದನ್ನು ನೀವು .observe() ಮೆಥಡ್ ಬಳಸಿ ಮಾಡುತ್ತೀರಿ. ಈ ಮೆಥಡ್ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಇದರಲ್ಲಿ entryTypes ಪ್ರಾಪರ್ಟಿ ಇರುತ್ತದೆ (ಅಥವಾ ಕೆಲವು ಆಧುನಿಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಒಂದೇ ಪ್ರಕಾರಕ್ಕೆ ಕೇವಲ type), ಇದು ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿರುವ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಅರೇ ಆಗಿದೆ.

// ಎರಡು ರೀತಿಯ ಎಂಟ್ರಿಗಳನ್ನು ಗಮನಿಸಲು ಪ್ರಾರಂಭಿಸಿ observer.observe({ entryTypes: ['mark', 'measure'] });

ಕೆಲವು ಸಾಮಾನ್ಯ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು ಇಲ್ಲಿವೆ:

• 'resource': ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಚಿತ್ರಗಳು, ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಂತಹ ಅಸೆಟ್‌ಗಳಿಗಾಗಿ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳ ಬಗ್ಗೆ ವಿವರಗಳು.
• 'paint': ಫಸ್ಟ್-ಪೇಂಟ್ ಮತ್ತು ಫಸ್ಟ್-ಕಂಟೆಂಟ್‌ಫುಲ್-ಪೇಂಟ್‌ಗಾಗಿ ಸಮಯ.
• 'largest-contentful-paint': ಗ್ರಹಿಸಿದ ಲೋಡಿಂಗ್ ವೇಗಕ್ಕಾಗಿ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ ಮೆಟ್ರಿಕ್.
• 'layout-shift': ದೃಶ್ಯ ಸ್ಥಿರತೆಗಾಗಿ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ ಮೆಟ್ರಿಕ್.
• 'first-input': ಮೊದಲ ಬಳಕೆದಾರರ ಸಂವಹನದ ಬಗ್ಗೆ ಮಾಹಿತಿ, ಇದನ್ನು ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ ಕೋರ್ ವೆಬ್ ವೈಟಲ್‌ಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
• 'longtask': ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಕಾರ್ಯಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ, ಇದು ಪ್ರತಿಕ್ರಿಯೆ ನೀಡದಿರಲು ಕಾರಣವಾಗಬಹುದು.
• 'mark' & 'measure': ಯೂಸರ್ ಟೈಮಿಂಗ್ API ಬಳಸಿ ನಿಮ್ಮ ಸ್ವಂತ ಕೋಡ್‌ನಲ್ಲಿ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುವ ಕಸ್ಟಮ್ ಮಾರ್ಕರ್‌ಗಳು ಮತ್ತು ಮಾಪನಗಳು.

3. ಅಬ್ಸರ್ವರ್ ಅನ್ನು ನಿಲ್ಲಿಸುವುದು

ನೀವು ಇನ್ನು ಮುಂದೆ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಬೇಕಾಗಿಲ್ಲದಿದ್ದಾಗ, ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮುಕ್ತಗೊಳಿಸಲು ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಡಿಸ್ಕನೆಕ್ಟ್ ಮಾಡುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.

observer.disconnect();

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಗಳು: ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಎನ್ನುವುದು ಗೂಗಲ್ ಒಂದು ವೆಬ್‌ಪುಟದ ಒಟ್ಟಾರೆ ಬಳಕೆದಾರರ ಅನುಭವದಲ್ಲಿ ಮುಖ್ಯವೆಂದು ಪರಿಗಣಿಸುವ ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಅವುಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಯ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಅನ್ವಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಪ್ರತಿಯೊಂದನ್ನು ಹೇಗೆ ಅಳೆಯುವುದು ಎಂದು ನೋಡೋಣ.

ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ (LCP) ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

LCP ಲೋಡಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. ಪುಟ ಲೋಡ್ ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ಮುಖ್ಯ ವಿಷಯವು ಬಹುಶಃ ಲೋಡ್ ಆದ ಸಮಯವನ್ನು ಇದು ಗುರುತಿಸುತ್ತದೆ. ಉತ್ತಮ LCP ಸ್ಕೋರ್ 2.5 ಸೆಕೆಂಡುಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುತ್ತದೆ.

ಪುಟ ಲೋಡ್ ಆಗುತ್ತಿದ್ದಂತೆ LCP ಎಲಿಮೆಂಟ್ ಬದಲಾಗಬಹುದು. ಆರಂಭದಲ್ಲಿ, ಒಂದು ಹೆಡಿಂಗ್ LCP ಎಲಿಮೆಂಟ್ ಆಗಿರಬಹುದು, ಆದರೆ ನಂತರ, ಒಂದು ದೊಡ್ಡ ಚಿತ್ರ ಲೋಡ್ ಆಗಿ ಹೊಸ LCP ಎಲಿಮೆಂಟ್ ಆಗಬಹುದು. ಇದಕ್ಕಾಗಿಯೇ ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಪರಿಪೂರ್ಣವಾಗಿದೆ—ಅದು ಪ್ರತಿ ಸಂಭಾವ್ಯ LCP ಅಭ್ಯರ್ಥಿಯನ್ನು ರೆಂಡರ್ ಮಾಡಿದಾಗ ನಿಮಗೆ ಸೂಚಿಸುತ್ತದೆ.

// LCP ಅನ್ನು ಗಮನಿಸಿ ಮತ್ತು ಅಂತಿಮ ಮೌಲ್ಯವನ್ನು ಲಾಗ್ ಮಾಡಿ let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // ಕೊನೆಯ ಎಂಟ್ರಿ ಅತ್ಯಂತ ಅಪ್-ಟು-ಡೇಟ್ LCP ಅಭ್ಯರ್ಥಿಯಾಗಿದೆ const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP updated: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // ಬಳಕೆದಾರರು ಸಂವಹನ ನಡೆಸಿದ ನಂತರ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಡಿಸ್ಕನೆಕ್ಟ್ ಮಾಡುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸ, // ಏಕೆಂದರೆ ಸಂವಹನಗಳು ಹೊಸ LCP ಅಭ್ಯರ್ಥಿಗಳನ್ನು ಕಳುಹಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಬಹುದು. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ. ಇದು ಒಂದು ನಿರ್ಣಾಯಕ ಆಯ್ಕೆಯಾಗಿದ್ದು, observe() ಮೆಥಡ್ ಅನ್ನು ಕರೆಯುವ *ಮೊದಲು* ರೆಕಾರ್ಡ್ ಮಾಡಲಾದ ಎಂಟ್ರಿಗಳನ್ನು ಸೇರಿಸಲು ಅಬ್ಸರ್ವರ್‌ಗೆ ಸೂಚಿಸುತ್ತದೆ. ಇದು ನೀವು ಆರಂಭಿಕ LCP ಈವೆಂಟ್ ಅನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID) ಮತ್ತು ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP) ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

ಈ ಮೆಟ್ರಿಕ್‌ಗಳು ಸಂವಹನಶೀಲತೆಯನ್ನು ಅಳೆಯುತ್ತವೆ. ಬಳಕೆದಾರರು ಪುಟದೊಂದಿಗೆ ಮೊದಲು ಸಂವಹನ ನಡೆಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಅವರ ಅನುಭವವನ್ನು ಇವು ಅಳೆಯುತ್ತವೆ.

ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID) ಬಳಕೆದಾರರು ಪುಟದೊಂದಿಗೆ ಮೊದಲು ಸಂವಹನ ನಡೆಸಿದಾಗಿನಿಂದ (ಉದಾ., ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ) ಬ್ರೌಸರ್ ಆ ಸಂವಹನಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸಲು ಸಾಧ್ಯವಾಗುವವರೆಗಿನ ಸಮಯವನ್ನು ಅಳೆಯುತ್ತದೆ. ಉತ್ತಮ FID 100 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುತ್ತದೆ.

ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP) ಒಂದು ಹೊಸ, ಹೆಚ್ಚು ಸಮಗ್ರವಾದ ಮೆಟ್ರಿಕ್ ಆಗಿದ್ದು, ಇದು ಮಾರ್ಚ್ 2024 ರಲ್ಲಿ FID ಯನ್ನು ಕೋರ್ ವೆಬ್ ವೈಟಲ್ ಆಗಿ ಬದಲಿಸಿದೆ. FID ಕೇವಲ *ಮೊದಲ* ಸಂವಹನದ *ವಿಳಂಬವನ್ನು* ಅಳೆಯುತ್ತದೆ, ಆದರೆ INP ಪುಟದ ಜೀವನಚಕ್ರದುದ್ದಕ್ಕೂ *ಎಲ್ಲಾ* ಬಳಕೆದಾರರ ಸಂವಹನಗಳ *ಒಟ್ಟು ಲೇಟೆನ್ಸಿಯನ್ನು* ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಅತ್ಯಂತ ಕೆಟ್ಟದ್ದನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ. ಇದು ಒಟ್ಟಾರೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯ ಉತ್ತಮ ಚಿತ್ರವನ್ನು ನೀಡುತ್ತದೆ. ಉತ್ತಮ INP 200 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುತ್ತದೆ.

ನೀವು 'first-input' ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಬಳಸಿ FID ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬಹುದು:

// FID ಅನ್ನು ಗಮನಿಸಿ const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // ಮೊದಲ ಇನ್‌ಪುಟ್ ವರದಿಯಾದ ನಂತರ ಡಿಸ್ಕನೆಕ್ಟ್ ಮಾಡಿ fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP ಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಒಂದು ಈವೆಂಟ್‌ನ ಪೂರ್ಣ ಅವಧಿಯನ್ನು ನೋಡುತ್ತದೆ. ನೀವು 'event' ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಗಮನಿಸಿ ಮತ್ತು ಅವಧಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೀರಿ, ಅತಿ ಉದ್ದವಾದದ್ದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತೀರಿ.

// ಸರಳೀಕೃತ INP ಮಾನಿಟರಿಂಗ್ ಉದಾಹರಣೆ let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP ಎನ್ನುವುದು ಈವೆಂಟ್‌ನ ಅವಧಿಯಾಗಿದೆ const inp = entry.duration; // ನಾವು ಪ್ರಸ್ತುತ ಕೆಟ್ಟದ್ದಕ್ಕಿಂತ ಉದ್ದವಾದ ಸಂವಹನಗಳ ಬಗ್ಗೆ ಮಾತ್ರ ಕಾಳಜಿ ವಹಿಸುತ್ತೇವೆ if (inp > worstInp) { worstInp = inp; console.log(`New worst INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold ತುಂಬಾ ಚಿಕ್ಕದಾದ, ಬಹುಶಃ ಅತ್ಯಲ್ಪವಾದ ಈವೆಂಟ್‌ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

CLS ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. ಬಳಕೆದಾರರು ಎಷ್ಟು ಬಾರಿ ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ಪ್ರಮಾಣೀಕರಿಸಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ—ಇದು ವಿಷಯವು ಎಚ್ಚರಿಕೆಯಿಲ್ಲದೆ ಪುಟದಲ್ಲಿ ಚಲಿಸುವ ಒಂದು ನಿರಾಶಾದಾಯಕ ಅನುಭವವಾಗಿದೆ. ಉತ್ತಮ CLS ಸ್ಕೋರ್ 0.1 ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುತ್ತದೆ.

ಸ್ಕೋರ್ ಎಲ್ಲಾ ವೈಯಕ್ತಿಕ ಲೇಔಟ್ ಶಿಫ್ಟ್ ಸ್ಕೋರ್‌ಗಳ ಒಟ್ಟು ಮೊತ್ತವಾಗಿದೆ. ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಇಲ್ಲಿ ಅತ್ಯಗತ್ಯ, ಏಕೆಂದರೆ ಅದು ಪ್ರತಿಯೊಂದು ಶಿಫ್ಟ್ ಸಂಭವಿಸಿದಾಗ ಅದನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ.

// ಒಟ್ಟು CLS ಸ್ಕೋರ್ ಅನ್ನು ಗಮನಿಸಿ ಮತ್ತು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ನಿಂದ ಉಂಟಾದ ಶಿಫ್ಟ್‌ಗಳನ್ನು ನಾವು ಎಣಿಸಲು ಬಯಸುವುದಿಲ್ಲ if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Current CLS score: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput ಪ್ರಾಪರ್ಟಿ ಮುಖ್ಯವಾಗಿದೆ. ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗೆ (ಉದಾಹರಣೆಗೆ ಮೆನುವನ್ನು ವಿಸ್ತರಿಸುವ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು) ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಸಂಭವಿಸುವ ನ್ಯಾಯಸಮ್ಮತ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇವುಗಳನ್ನು CLS ಸ್ಕೋರ್‌ಗೆ ಎಣಿಸಬಾರದು.

ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್‌ಗಳನ್ನು ಮೀರಿ: ಇತರ ಶಕ್ತಿಶಾಲಿ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು

ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಒಂದು ಉತ್ತಮ ಆರಂಭದ ಹಂತವಾಗಿದ್ದರೂ, ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಇನ್ನೂ ಹೆಚ್ಚಿನದನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಇತರ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳಿವೆ.

ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು (`longtask`)

ಲಾಂಗ್ ಟಾಸ್ಕ್ API, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಕಾಲ ಆಕ್ರಮಿಸುವ ಕಾರ್ಯಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಇವು ಸಮಸ್ಯಾತ್ಮಕವಾಗಿವೆ ಏಕೆಂದರೆ ಮುಖ್ಯ ಥ್ರೆಡ್ ಕಾರ್ಯನಿರತವಾಗಿರುವಾಗ, ಪುಟವು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಇದು ನಿಧಾನವಾದ ಅಥವಾ ಸ್ಥಗಿತಗೊಂಡ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. INP ಅನ್ನು ಸುಧಾರಿಸಲು ಈ ಕಾರ್ಯಗಳನ್ನು ಗುರುತಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ.

// ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ಗಮನಿಸಿ const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Long Task Detected: ${entry.duration.toFixed(2)}ms`); // 'attribution' ಪ್ರಾಪರ್ಟಿ ಕೆಲವೊಮ್ಮೆ ದೀರ್ಘ ಕಾರ್ಯಕ್ಕೆ ಕಾರಣವೇನೆಂದು ಹೇಳಬಹುದು console.log('Attribution:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

ಸಂಪನ್ಮೂಲ ಸಮಯಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು (`resource`)

ನಿಮ್ಮ ಅಸೆಟ್‌ಗಳು ಹೇಗೆ ಲೋಡ್ ಆಗುತ್ತಿವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗೆ ಮೂಲಭೂತವಾಗಿದೆ. 'resource' ಎಂಟ್ರಿ ಪ್ರಕಾರವು ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಸಂಪನ್ಮೂಲಕ್ಕೂ ವಿವರವಾದ ನೆಟ್‌ವರ್ಕ್ ಸಮಯದ ಡೇಟಾವನ್ನು ನೀಡುತ್ತದೆ, ಇದರಲ್ಲಿ DNS ಲುಕಪ್, TCP ಸಂಪರ್ಕ, ಮತ್ತು ಕಂಟೆಂಟ್ ಡೌನ್‌ಲೋಡ್ ಸಮಯಗಳು ಸೇರಿವೆ.

// ಸಂಪನ್ಮೂಲ ಸಮಯಗಳನ್ನು ಗಮನಿಸಿ const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುತ್ತಿರುವ ಚಿತ್ರಗಳನ್ನು ಹುಡುಕೋಣ if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Slow image detected: ${entry.name}`, `Duration: ${entry.duration.toFixed(2)}ms`); } } }); // ಈ ಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಆಗುವ ಮೊದಲು ಲೋಡ್ ಆದ ಅಸೆಟ್‌ಗಳನ್ನು ಹಿಡಿಯಲು // ಸಂಪನ್ಮೂಲ ಸಮಯಗಳಿಗಾಗಿ 'buffered: true' ಬಳಸುವುದು ಬಹುತೇಕ ಯಾವಾಗಲೂ ಅವಶ್ಯಕ. resourceObserver.observe({ type: 'resource', buffered: true });

ಕಸ್ಟಮ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮಾರ್ಕ್‌ಗಳನ್ನು ಅಳೆಯುವುದು (`mark` ಮತ್ತು `measure`)

ಕೆಲವೊಮ್ಮೆ, ನೀವು ಅಪ್ಲಿಕೇಶನ್-ನಿರ್ದಿಷ್ಟ ಲಾಜಿಕ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಬೇಕಾಗುತ್ತದೆ. ಯೂಸರ್ ಟೈಮಿಂಗ್ API ನಿಮಗೆ ಕಸ್ಟಮ್ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಅವುಗಳ ನಡುವಿನ ಅವಧಿಯನ್ನು ಅಳೆಯಲು ಅನುಮತಿಸುತ್ತದೆ.

• performance.mark('start-operation'): 'start-operation' ಹೆಸರಿನ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• performance.mark('end-operation'): ಮತ್ತೊಂದು ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• performance.measure('my-operation', 'start-operation', 'end-operation'): ಎರಡು ಮಾರ್ಕ್‌ಗಳ ನಡುವೆ ಒಂದು ಮಾಪನವನ್ನು ರಚಿಸುತ್ತದೆ.

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಈ ಕಸ್ಟಮ್ 'mark' ಮತ್ತು 'measure' ಎಂಟ್ರಿಗಳನ್ನು ಕೇಳಬಹುದು, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಸಮಯಗಳು ಅಥವಾ ನಿರ್ಣಾಯಕ API ಕರೆಯ ಅವಧಿ ಮತ್ತು ನಂತರದ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆಯಂತಹ ವಿಷಯಗಳ ಮೇಲೆ ಸಮಯದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಪರಿಪೂರ್ಣವಾಗಿದೆ.

// ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್‌ನಲ್ಲಿ: performance.mark('start-data-processing'); // ... ಕೆಲವು ಸಂಕೀರ್ಣ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆ ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // ನಿಮ್ಮ ಮಾನಿಟರಿಂಗ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Custom Measurement '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

ಮುಂದುವರಿದ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ವೃತ್ತಿಪರ ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ.

• ಯಾವಾಗಲೂ `buffered: true` ಅನ್ನು ಪರಿಗಣಿಸಿ: ಪುಟ ಲೋಡ್‌ನ ಆರಂಭದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳಿಗೆ (ಉದಾಹರಣೆಗೆ 'resource', 'paint', ಅಥವಾ 'largest-contentful-paint'), ಬಫರ್ಡ್ ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು ಅವುಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದನ್ನು ತಪ್ಪಿಸಲು ಅತ್ಯಗತ್ಯ.
• ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸಿ: ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಅದನ್ನು ಬಳಸುವ ಮೊದಲು ಅದರ ಅಸ್ತಿತ್ವವನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಜಾಣತನ. ನಿರ್ದಿಷ್ಟ ಬ್ರೌಸರ್‌ನಿಂದ ಯಾವ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು ಬೆಂಬಲಿತವಾಗಿವೆ ಎಂಬುದನ್ನು ಸಹ ನೀವು ಪರಿಶೀಲಿಸಬಹುದು.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // ದೀರ್ಘ ಕಾರ್ಯಗಳಿಗಾಗಿ ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಬಳಸುವುದು ಸುರಕ್ಷಿತ }
• ಡೇಟಾವನ್ನು ಅನಾಲಿಟಿಕ್ಸ್ ಸೇವೆಗೆ ಕಳುಹಿಸಿ: ಕನ್ಸೋಲ್‌ಗೆ ಡೇಟಾವನ್ನು ಲಾಗ್ ಮಾಡುವುದು ಅಭಿವೃದ್ಧಿಗೆ ಉತ್ತಮವಾಗಿದೆ, ಆದರೆ ನೈಜ-ಪ್ರಪಂಚದ ಮಾನಿಟರಿಂಗ್‌ಗಾಗಿ, ನೀವು ಈ ಡೇಟಾವನ್ನು ಒಟ್ಟುಗೂಡಿಸಬೇಕಾಗುತ್ತದೆ. ಕ್ಲೈಂಟ್‌ನಿಂದ ಈ ಟೆಲಿಮೆಟ್ರಿಯನ್ನು ಕಳುಹಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ navigator.sendBeacon() API ಅನ್ನು ಬಳಸುವುದು. ಇದು ಸರ್ವರ್‌ಗೆ ಸಣ್ಣ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಕಳುಹಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ನಾನ್-ಬ್ಲಾಕಿಂಗ್ ಕಾರ್ಯವಿಧಾನವಾಗಿದೆ, ಮತ್ತು ಪುಟವನ್ನು ಅನ್‌ಲೋಡ್ ಮಾಡುವಾಗಲೂ ಇದು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
• ಅಬ್ಸರ್ವರ್‌ಗಳನ್ನು ಕಾಳಜಿಯ ಆಧಾರದ ಮೇಲೆ ಗುಂಪು ಮಾಡಿ: ನೀವು ಒಂದೇ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಅನೇಕ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳಿಗೆ ಬಳಸಬಹುದಾದರೂ, ವಿವಿಧ ಕಾಳಜಿಗಳಿಗಾಗಿ ಪ್ರತ್ಯೇಕ ಅಬ್ಸರ್ವರ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚು ಸ್ವಚ್ಛವಾಗಿರುತ್ತದೆ (ಉದಾ., ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್‌ಗಾಗಿ ಒಂದು, ಸಂಪನ್ಮೂಲ ಸಮಯಗಳಿಗಾಗಿ ಒಂದು, ಕಸ್ಟಮ್ ಮೆಟ್ರಿಕ್ಸ್‌ಗಾಗಿ ಒಂದು). ಇದು ಕೋಡ್ ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: API ಅನ್ನು ಅತ್ಯಂತ ಕಡಿಮೆ-ಹೊರೆಯಾಗಿರುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಭಾರೀ ಗಣನೆಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಅತ್ಯಂತ ಸಂಕೀರ್ಣವಾದ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಸಂಭಾವ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿಮ್ಮ ಅಬ್ಸರ್ವರ್ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಸರಳ ಮತ್ತು ಸಮರ್ಥವಾಗಿಡಿ. ಯಾವುದೇ ಭಾರೀ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೆಬ್ ವರ್ಕರ್‌ಗೆ ಮುಂದೂಡಿ ಅಥವಾ ಕಚ್ಚಾ ಡೇಟಾವನ್ನು ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್‌ಗೆ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ಕಳುಹಿಸಿ.

ತೀರ್ಮಾನ: ಕಾರ್ಯಕ್ಷಮತೆ-ಪ್ರಥಮ ಸಂಸ್ಕೃತಿಯನ್ನು ನಿರ್ಮಿಸುವುದು

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಕೇವಲ ಮತ್ತೊಂದು ಸಾಧನಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಇದು ನಾವು ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಮೀಪಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಬದಲಾವಣೆಯಾಗಿದೆ. ಇದು ನಮ್ಮನ್ನು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ, ಒಂದು-ಬಾರಿಯ ಮಾಪನಗಳಿಂದ ಪೂರ್ವಭಾವಿ, ನಿರಂತರ ಮಾನಿಟರಿಂಗ್‌ಗೆ ಸರಿಸುತ್ತದೆ, ಅದು ಜಗತ್ತಿನಾದ್ಯಂತ ನಮ್ಮ ಬಳಕೆದಾರರ ನಿಜವಾದ, ಡೈನಾಮಿಕ್ ಅನುಭವವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ. ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್, ದೀರ್ಘ ಕಾರ್ಯಗಳು, ಸಂಪನ್ಮೂಲ ಸಮಯಗಳು, ಮತ್ತು ಕಸ್ಟಮ್ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಬಳಕೆದಾರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಮೊದಲು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

ಪರ್ಫಾರ್-ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಯಾವುದೇ ಅಭಿವೃದ್ಧಿ ತಂಡದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆ-ಪ್ರಥಮ ಸಂಸ್ಕೃತಿಯನ್ನು ನಿರ್ಮಿಸುವ ನಿಟ್ಟಿನಲ್ಲಿ ಒಂದು ನಿರ್ಣಾಯಕ ಹೆಜ್ಜೆಯಾಗಿದೆ. ನೀವು ಮುಖ್ಯವಾದುದನ್ನು ಅಳೆಯಲು ಸಾಧ್ಯವಾದಾಗ, ನೀವು ಮುಖ್ಯವಾದುದನ್ನು ಸುಧಾರಿಸಬಹುದು. ಇಂದೇ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಈ ಅಬ್ಸರ್ವರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಿ. ನಿಮ್ಮ ಬಳಕೆದಾರರು—ಅವರು ಜಗತ್ತಿನ ಎಲ್ಲೇ ಇರಲಿ—ವೇಗವಾದ, ಸುಗಮವಾದ, ಮತ್ತು ಹೆಚ್ಚು ಆನಂದದಾಯಕ ಅನುಭವಕ್ಕಾಗಿ ನಿಮಗೆ ಧನ್ಯವಾದ ಹೇಳುತ್ತಾರೆ.